<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="text">Hello<br />World</div>
    <style>
      /* 导入字体文件 */
      @import url("https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,MONO@-15..0,300..800,0..1,0..1,0..1&display=swap");
      body {
        height: 98vh;
        display: grid;
        place-items: center;
        background-color: #182c36;
      }
      .text {
        font-family: "Recursive", monospace;
        font-size: clamp(4em, 15vmin, 20em);
        text-shadow: 0;
        color: #3794f1;
        animation: anime 2s cubic-bezier(0.445, 0.05, 0.55, 0.95) alternate
          infinite;
      }

      @keyframes anime {
        from {
          font-variation-settings: "wght" 800, "slnt" 0;
          text-shadow: -5px 10px 0px #00e6e6, -10px 20px 0px #01cccc,
            -15px 30px 0px #00bdbd;
        }

        to {
          font-variation-settings: "wght" 300, "slnt" 20;
          text-shadow: none;
        }
      }
    </style>
  </body>
</html>
